<template>
  <header>
    <h2>欢迎进入后台管理系统首页</h2>
    <p>欢迎用户：【<span>{{user}}</span>】，<button @click="tuichu()">退出登录</button></p>
  </header>
</template>

<script setup>
import router from "@/router";


let user = sessionStorage.getItem('isLogin');

const tuichu =() =>{
  router.replace('/login');
  sessionStorage.clear();
}
</script>

<style scoped>
header{
    width: 100%;
    height: 80px;
    line-height: 80px;
    background-color: rgb(53, 53, 53);
    display: flex;
}
header h2{
  color: darkcyan;
  text-shadow:  0px 0px 8px rgba(255, 255, 255, 1);
  margin-left: 10px;
}
header p{
  margin-left: 20px;
  color: white;
}
header p span{
  color: rgb(29, 108, 255);
}
header p button{
  border: none;
  background-color: rgb(53, 53, 53);
  color: darkcyan;
  text-decoration: underline 1px darkcyan;
}
</style>